<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车价值: {{ car.price }} 万</h2>
    <button @click="changePrice">修改金额</button>
  </div>

  <hr />

  <strong>游戏列表:</strong>
  <ul>
    <li v-for="item of games" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script lang="ts" setup name="Person">
import { reactive, ref } from 'vue'

let car = ref({
  brand: '奔驰',
  price: 100,
})

// 响应式对象
let games = ref([
  { id: 'donwdd', name: '王者荣耀' },
  { id: 'donwww', name: '原神' },
  { id: 'donwxx', name: '吃鸡' },
])

let obj = reactive({ x: 999 })

console.log(car)
console.log(obj)

const changePrice = () => {
  car.value.price += 10
}
</script>

<style scoped>
.person {
  background-color: #2bc7bd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  /* 上下为0 左右为5 */
  margin: 0 5px;
}
</style>
